<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.5.0/build/ol.js" type="text/javascript"></script>
    <script src="https://openlayers.org/en/v4.5.0/build/ol-debug.js" type="text/javascript"></script>
    <style>
        .map {
            height: 600px;
            width: 100%;
        }

        .Title {
            height: 50px;
            width: 100%;
            font-size: 30px;
    </style>

    <title>Yuhao Kang</title>
</head>
<body>
    <h2>Multi-Methods Map Publishing</h2>
	<h4>Yuhao Kang  2014301130041</h4>
    <div id="title1" class="Title">WMS</div>
    <div id="map1" class="map"></div>
    <script type="text/javascript">

        var format = 'image/png';
        var bounds = [73.441277, 18.159829, 135.08693, 53.561771];//范围

        //Map
        var ImageMap = new ol.layer.Image({
            source: new ol.source.ImageWMS({
                ratio: 1,
                //My url
                url: 'http://47.100.16.199:8080/geoserver/KYH/wms',
                //Parameters
                params: {
                    'FORMAT': format,
                    'VERSION': '1.1.0',
                    STYLES: 'CHINA',
                    //Layers
                    LAYERS: 'KYH:CHINA_2014GDP',
                }
            })
        });

        var osmMap = new ol.layer.Tile({
            source: new ol.source.OSM()
        });

        //Projection
        var projection = new ol.proj.Projection({
            code: 'EPSG:4326',//Projection code
            units: 'degrees',
            axisOrientation: 'neu'
        });

        //Map
        var map = new ol.Map({
            //Control
            controls: ol.control.defaults({
                attribution: false
            }).extend([
                new ol.control.ScaleLine()
            ]),
            //Target
            target: 'map1',
            controls: ol.control.defaults({
                attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                    collapsible: false
                })
            }),
            //Layers
            layers: [
                //Add layers
                osmMap,
                ImageMap,
            ],
            //View
            view: new ol.View({
                //Projection
                projection: projection,
                minZoom: 4,
                maxZoom: 9
            })
        });

        map.on('click', function (e) {
//            var features = map.getFeaturesAtPixel(e.pixel, function (feature, layer) {
//                return feature;
//            });
			//Click and select
			var features=map.getFeaturesAtPixel(e.pixel);
            var feature = features[0];
            attr = feature.getProperties();
			
            var text = document.getElementById('title1');
            text.textContent="WMS      "+attr["NAME"]+" GDP: "+attr["GDP"];
        });
        //Show map
        map.getView().fit(bounds, map.getSize());
    </script>

    <div id="title2" class="Title">WMTS</div>
    <div id="map2" class="map"></div>
    <script type="text/javascript">

        var gridNames = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21'];
        var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7];
        //Projection
        var projection = new ol.proj.Projection({
            code: 'EPSG:4326',
            units: 'degrees',
            axisOrientation: 'neu'
        });

        //OSM
        var osmMap = new ol.layer.Tile({
            source: new ol.source.OSM()
        });

        var map = new ol.Map({
            layers: [
                osmMap,
                new ol.layer.Tile({
                    source: new ol.source.WMTS({
                        url: 'http://47.100.16.199:8080/geoserver/gwc/service/wmts',
                        layer: 'KYH:CHINA_2014GDP',
                        matrixSet: 'EPSG:4326',
                        format: 'image/png',
                        projection: projection,
						//Tile grid
                        tileGrid: new ol.tilegrid.WMTS({
                            tileSize: [256, 256],
                            extent: [-180.0, -90.0, 180.0, 90.0],
                            origin: [-180.0, 90.0],
                            resolutions: resolutions,
                            matrixIds: gridNames,
                        }),
                        style: 'KYH:CHINA',
                        wrapX: true
                    })
                })
            ],
            target: 'map2',
            controls: ol.control.defaults({
                attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                    collapsible: false
                })
            }),
            view: new ol.View({
                projection: projection,
                minZoom: 4,
                maxZoom: 9
            })
        });

        map.on('click', function (e) {
            var features=map.getFeaturesAtPixel(e.pixel);
            var feature = features[0];
            attr = feature.getProperties();
			
            var text = document.getElementById('title2');
            text.textContent="WMTS      "+attr["NAME"]+" GDP: "+attr["GDP"];
        });

        map.getView().fit(bounds, map.getSize());
    </script>

    <div id="title3" class="Title">Vector Tile(Mapbox)</div>
    <div id="map3" class="map"></div>

    <script type="text/javascript">
		//Styles
		var style_1=new ol.style.Style({
            fill: new ol.style.Fill({
                color: '#f7fbff'
            }),
            stroke: new ol.style.Stroke({
                color: '#000000',
                width: 2
            })
        });
		var style_2=new ol.style.Style({
            fill: new ol.style.Fill({
                color: '#c8ddf0'
            }),
            stroke: new ol.style.Stroke({
                color: '#000000',
                width: 2
            })
        });
		var style_3=new ol.style.Style({
            fill: new ol.style.Fill({
                color: '#73b3d8'
            }),
            stroke: new ol.style.Stroke({
                color: '#000000',
                width: 2
            })
        });
		var style_4=new ol.style.Style({
            fill: new ol.style.Fill({
                color: '#2879b9'
            }),
            stroke: new ol.style.Stroke({
                color: '#000000',
                width: 2
            })
        });
		var style_5=new ol.style.Style({
            fill: new ol.style.Fill({
                color: '#08306b'
            }),
            stroke: new ol.style.Stroke({
                color: '#000000',
                width: 2
            })
        });
		
		
		//Style handle
        function simpleStyle(feature) {
			if(feature.get("GDP")<=5501.45){
				return style_1;
			}
			else if(feature.get("GDP")<=14420.20){
				return style_2;
			}
			else if(feature.get("GDP")<=20232.90){
				return style_3;
			}
			else if(feature.get("GDP")<=28572.63){
				return style_4;
			}
			return style_5;
        }

        var osmMap = new ol.layer.Tile({
            source: new ol.source.OSM()
        });
        var layer = 'KYH:CHINA_2014GDP';
        var projection_epsg_no = '900913';
		//Vector tile map
        var map = new ol.Map({			
            target: 'map3',
            controls: ol.control.defaults({
                attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                    collapsible: false
                })
            }),
            view: new ol.View({
                center: [12000000, 4500000],
                zoom: 4,
                minZoom: 4,
                maxZoom: 9,
            }),
            layers: [
                osmMap,
                new ol.layer.VectorTile({
					style:simpleStyle,
                    source: new ol.source.VectorTile({
                        tilePixelRatio: 1, // oversampling when > 1
                        tileGrid: ol.tilegrid.createXYZ({ maxZoom: 19 }),
                        format: new ol.format.MVT(),
                        url: 'http://47.100.16.199:8080/geoserver/gwc/service/tms/1.0.0/' + layer +
                        '@EPSG%3A' + projection_epsg_no + '@pbf/{z}/{x}/{-y}.pbf'
                    })
                })]
        });

        map.on('click', function (e) {
            var features=map.getFeaturesAtPixel(e.pixel);
            var feature = features[0];
            attr = feature.getProperties();
			
            var text = document.getElementById('title3');
            text.textContent="Vector Tile(Mapbox)      "+attr["NAME"]+" GDP: "+attr["GDP"];
        });
    </script>
    <button onclick="move()"></button>
</body>
</html>